<template>
    <div class="newsInfo-container">
        <!-- 大标题 -->
        <h3 class="title">{{newsInfo.title}}</h3>
        <!-- 子标题 -->
        <p class="subtitle">
            <span>发表时间：{{newsInfo.add_time | dateFormat}}</span>
            <span>点击：{{newsInfo.click}}次</span>
        </p>
        <hr>
        <!-- 内容区域 -->
        <div class="content" v-html="newsInfo.content" ref="contents">
            {{newsInfo.content}}
        </div>
        <!-- 评论子组件区域 将该父组件的ID传给子组件-->
        <common-disscuss-box  :id="this.id"></common-disscuss-box>
    </div>
</template>
<script>
import {Toast} from "mint-ui";
//1、导入评论子组件
import common from '../subcomponents/Common.vue'
export default {
    data(){
        return {
            /**
             * http://localhost:3000/#/home/newsInfo/13?name=dwyf
             * $route.params.id 可以取到的值 13
             * $route.query.name 取到的值为wyf
             */
            id:this.$route.params.id,
            newsInfo:{}
        }
    },    
    created(){
        this.getNewsInfo();
    },
    methods:{
        //获取新闻详情
        getNewsInfo(){
            this.$http.get('getnew/'+this.id).then(res =>{
                if(res.body.status === 0){
                    //console.log(this.newsInfo.content);
                     this.newsInfo = this.dealHtml(res.body.message[0]);
                     console.dir(this.$refs.contents.childNodes);
                    //this.newsInfo = res.body.message[0];
                }else{
                    Toast("获取新闻详情失败!");
                }
            })
        },

        dealHtml(html){
            var str = html.content;
            str = str.substring(1, str.length-1); //去掉第一位和最后一位的双引号
            str.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
                //console.log(capture);
                return 'https://portrait.gitee.com/uploads/avatars/user/1904/5712027_wangyfax_1582106468.png!avatar30';
            });
            //$(html).find('img').each(function(){this.src='https://portrait.gitee.com/uploads/avatars/user/1904/5712027_wangyfax_1582106468.png!avatar30'})
            html.content = str;
            //console.log(html.content);
            return html;
        }
    },
    //2、注册子组件
    components:{
        "common-disscuss-box":common
    }
}
</script>

<style lang="scss" scoped>
    .newsInfo-container{
        padding: 0 4px;
        .title{
            font-size: 16px;
            text-align: center;
            margin: 15px 0px;
            color: red;
        }

        .subtitle{
            font-size: 13px;
            color: #226aff;
            display: flex;
            justify-content: space-between;
        }

        .content{
            img {
                width: 100%;
            }
        }
    }
</style>